import React, { Component } from 'react'
import { TouchableContainer } from '../wrapper'

export default class LongPressPlayground extends Component {
  constructor() {
    super()
    this.renderUnit = this.renderUnit.bind(this)
    this.state = {
      digit: 0,
      delta: 0,
    }
  }
  render() {
    const { digit } = this.state
    return (
      <div className={`rt-long-press-container`}>
        <header>Long Press Playground</header>
        <div className={`rt-row-box`}>
          <div className={`rt-above-box`}>
            <span>（1~50）</span>
            <div>
              <span>{digit}</span>
              <span>手</span>
            </div>
          </div>
          <div className={`rt-below-box`}>
            <div className={`rt-wrapper`}>
              {[-10, -1, 0, 1, 10].map(this.renderUnit)}
            </div>
          </div>
        </div>
      </div>
    )
  }
  renderUnit(v) {
    const { digit, delta } = this.state
    return (
      <TouchableContainer
        key={v}
        className={`${(delta === v) ? 'rt-active' : ''}`}
        onClick={() => {
          // begin at simple
          this.setState({
            delta: v,
            digit: (digit + v),
          })
        }}
      >
        {(v > 0) ? `+${v}` : v}
      </TouchableContainer>
    )
  }
}